<script lang="ts" setup>
import type { FieldRule, FormInstance } from '@arco-design/web-vue'
import type { AreaItem } from '@/apis/model/resolve'
import { Message } from '@arco-design/web-vue'
import { addDnsAccountApi, updateDnsAccountApi } from '@/apis/modules/dns.ts'
// import { getApiResolveDomainsApi } from '@/apis/modules/resolve/domain'

interface IProp {
  record?: AreaItem
}
const props = withDefaults(defineProps<IProp>(), {})
const emit = defineEmits<IEmits>()
interface IEmits {
  (e: 'reload', flag: boolean): void
}
const visible = defineModel<boolean>('visible', { required: true })
const title = computed(() =>
  props.record?.id ? '编辑域名账户' : '新建域名账户',
)
const formRef = ref<FormInstance>()
const dnsNameOptions = ref<LabelValue[]>([{ label: 'Cloudflare', value: 1 }])
const formState = ref({
  name: '',
  provider_type: '',
  provider_config: {
    api_token: '',
  },
  remark: '',
  id: '',
})

// 清空表单
function resetField() {
  formRef.value?.resetFields()
  formState.value = {
    name: '',
    provider_type: '',
    provider_config: {
      api_token: '',
    },
    remark: '',
    id: '',
  }
}

const rules: Record<string, FieldRule> = {
  name: { required: true, message: '请输入账户名称' },
  provider_type: { required: true, message: '请选择 DNS 服务商' },
}

async function handleOpen() {
  if (props.record) {
    // formState.value = { ...props.record }
    formState.value.name = props.record.name
    formState.value.remark = props.record.remark
    formState.value.provider_type = props.record.provider_type
    formState.value.id = props.record.id
    formState.value.provider_config.api_token
      = props.record.provider_config?.api_token
  }
}
async function handleSubmit() {
  const error = await formRef.value?.validate()
  if (error)
    return false

  const fn = props.record ? updateDnsAccountApi : addDnsAccountApi
  const data = props.record
    ? { id: props.record.id!, ...formState.value }
    : formState.value
  await fn(data).then(() => {
    Message.success('操作成功')
    visible.value = false
  })
}

function handleClose() {
  resetField()
  emit('reload', !!props.record?.id)
}
</script>

<template>
  <resource-dialog
    v-model:visible="visible"
    :title="title"
    :width="480"
    :mask-closable="false"
    :before-open="handleOpen"
    :before-ok="handleSubmit"
    :before-close="handleClose"
  >
    <a-form
      ref="formRef"
      layout="vertical"
      :rules="rules"
      :model="formState"
    >
      <a-form-item
        label="账户名称"
        field="name"
        asterisk-position="end"
      >
        <a-input
          v-model="formState.name"
          placeholder="请输入账户名称"
          :max-length="32"
          show-word-limit
        />
      </a-form-item>
      <a-form-item
        label="DNS 服务商"
        field="provider_type"
        asterisk-position="end"
      >
        <a-select
          v-model="formState.provider_type"
          :options="dnsNameOptions"
          placeholder="请选择 DNS 服务商 "
          :disabled="record?.id != null"
        />
      </a-form-item>
      <a-form-item
        label="API Token"
        field="provider_config.api_token"
        asterisk-position="end"
        :rules="[
          { required: true, message: 'API Token 必填' },
          // { minLength: 10, message: '长度不能少于10个字符' },
        ]"
      >
        <a-input-password
          v-model="formState.provider_config.api_token"
          placeholder="请输入 API Token"
        />
      </a-form-item>

      <a-form-item
        label="备注"
        field="remark"
        asterisk-position="end"
      >
        <a-textarea
          v-model="formState.remark"
          :max-length="200"
          show-word-limit
          :auto-size="{ maxRows: 5, minRows: 5 }"
          placeholder="请输入备注"
        />
      </a-form-item>
    </a-form>
  </resource-dialog>
</template>

<style lang="less" scoped>
:deep(.arco-select-view-value) {
  -webkit-text-fill-color: #1d2129;
}
</style>
